<template>
  <!-- /user/getUser -->
  <div class="row-right">
    <div class="row">
      <div class="col-xs-12">
        <div class="info-card">
          <div class="col-sm-5 col-xs-12">
            <div class="card-left">
              <div class="img-box">
                <img v-if="baseImg" :src="baseImg" width="110" height="110" class="img-circle">
                <img v-else :src="'https://kegonghui.oss-cn-beijing.aliyuncs.com/'+userInfo.headimg+'?x-oss-process=image/circle,r_100'" alt="..." width="110" height="110" class="img-circle">
              </div>
              <div class="up-box">
                <a href="javascript:;" class="btn-ghost">更换头像</a>
                <input type="file" class="up-input" @change="handleFileChange($event)">
              </div>
            </div>
          </div>
          <div class="col-sm-7 col-xs-12">
            <div class="card-right">
              <form class="common-form">
                <div class="form-group row">
                  <div class="col-xs-8">
                    <label for="">昵称：</label>
                    <input type="text" class="form-control" id="" v-model="userInfo.nickname">
                  </div>
                  <div class="col-xs-4">
                    <label for="">性别：</label>
                    <select class="form-control" name="" id="" v-model="userInfo.sex">
                      <option value="1">男</option>
                      <option value="2">女</option>
                    </select>
                    <!-- <input class="form-control" id="" v-model="userInfo.sex"> -->
                  </div>
                </div>
                <div class="form-group">
                  <label for="">手机号：</label>
                  <input type="text" class="form-control" id="" v-model="userInfo.mobile" disabled>
                </div>
                <div class="form-group">
                  <label for="">常用邮箱：</label>
                  <input type="email" class="form-control" id="" v-model="userInfo.email">
                </div>
                <div class="form-group text-right btn-box">
                  <a href="javascript:;" class="btn-ghost" @click="handleClone()" style="margin-right:10px;">恢复更改</a>
                  <a href="javascript:;" class="btn-ghost" @click="handleUploadFile($event)">保存</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
// @ is an alias to /src
import CourseItem from '@/components/Course-Item.vue'
import util from '@/assets/js/utils.js'
export default {
  name: 'course',
  components: {
    CourseItem
  },
  data () {
    return {
      oldInfo: {
        headimg: '',
        nickname: '',
        sex: '',
        mobile: '',
        email: '',
        isExpert: 0
      },
      userInfo: {
        headimg: '',
        nickname: '',
        sex: '',
        mobile: '',
        email: '',
        isExpert: 0
      },
      baseImg: '',
      file: ''
    }
  },
  created () {
    this.fetchUserInfo()
  },
  methods: {
    handleFileChange (event) {
      this.file = event.target.files[0]
      this.handleFileReader()
      console.log(event.target.files[0])
    },
    handleUploadFile (event) {
      //上传
      let that = this
      let userInfo = that.userInfo
      event.preventDefault()
      let formData = new FormData()
      formData.append('headImg', this.file)
      formData.append('nickName', userInfo.nickname)
      formData.append('sex', userInfo.sex)
      formData.append('email', userInfo.email)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios
        .post('/user/updateUser', formData, config)
        .then(function (response) {
          if (response.data.suc == 200) {
            alert('上传成功')
            that.file = null
            location.reload()
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    handleFileReader () {
      // 前端展示图片
      let that = this
      var reader = new FileReader()
      // 将文件以Data URL形式进行读入页面
      reader.addEventListener(
        'load',
        function () {
          that.baseImg = reader.result
        },
        false
      )
      // 调用reader.readAsDataURL()方法，把图片转成base64
      reader.readAsDataURL(this.file)
    },
    fetchUserInfo () {
      let that = this
      axios
        .post('/my/getUserInfo', qs.stringify({}))
        .then(function (response) {
          if (response.data.suc == 200) {
            that.oldInfo = response.data.data
            that.userInfo = response.data.data
            that.$store.dispatch('handleUserInfoChange', response.data.data)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    handleClone () {
      this.userInfo = util.deepClone(this.oldInfo)
    }
  }
}
</script>
<style lang="scss" scoped>
.info-card {
  .img-box {
    margin: 110px auto 120px;
  }
}
</style>

